{extend name="common/application" /}
{block name="title"}
<title>帮助中心</title>
{/block}
{block name="css"}
		<link rel="stylesheet" type="text/css" href="_CSS_/help.css"/>
		<!--[if lt IE 9]>
		<script src="http://www.ijquery.cn/js/html5shiv.js"></script>
		<![endif]-->
		<style type="text/css">
			.menuchildItem{padding-left: 90px;}
			.form-control{
				width: 220px;
				height: 40px;
				padding: 0 20px;
				border: 1px solid #E5E5E5;
			}
			.questionTypeItem{
			    width: auto !important;
				text-align: left !important;							
			}
		</style>

				{/block}


{block name="navbar"}{include file="/common/navbar" /}{/block}
{block name="content"}
		
		<!-- 主体内容 -->
			<div class="main">
				<div class="mainBody normalBox clearfix">
					<!--左菜单-->
					<ul class="menuList fl">
						<li>
							<a class="menuItem dropBg" href="{:url('index/help/index')}">用户须知</a>
							<div class="childMenu">
								<a class="menuchildItem" href="{:url('index/help/index')}">登录注册</a>
								<a class="menuchildItem" href="{:url('index/help/help_wj')}">忘记密码</a>
								<a class="menuchildItem" href="{:url('index/help/help_xg')}">修改资料</a>
							</div>
						</li>
						<li>
							<a class="menuItem dropBg" href="{:url('index/help/help_mb')}">常见问题</a>
							<div class="childMenu">
								<a class="menuchildItem" href="{:url('index/help/help_mb')}">常用模板</a>
								<a class="menuchildItem" href="{:url('index/help/help_zf')}">支付方式</a>
								<a class="menuchildItem" href="{:url('index/help/help_sh')}">售后服务</a>
							</div>
						</li>
						<li>
							<a class="menuItem" href="{:url('index/help/help_xy')}">用户协议</a>
						</li>
						<li>
							<a class="menuItem" href="{:url('index/help/help_bz')}">法律保障</a>
						</li>
						<li class="bb0 showChild">
							<a class="menuItem activeMenu" href="{:url('index/help/feedback')}">意见反馈</a>
						</li>
					</ul>
					<!--右内容-->
					<!--意见反馈-->
					<div class="menuContent fr">
						<div class="menuConHeader">
							<!--面包屑导航-->
							<div class="breadcrumb">
								<p>当前位置：
									<a href="{:url('index/help/feedback')}">意见反馈</a> &gt;
									<a class="curPage" href="{:url('index/help/feedback')}">意见反馈</a>
								</p>
							</div>
						</div>
						<div class="menuConBody">
							<form>
								<div class="formItem">
									<label class="fl" for="type">问题类型：</label>
									<div class="questionType">
									</div>
								</div>
								<div class="formItem">
									<label class="fl">上传图片：</label>
									<div class="upload-img">
										<div class="upload-btn">
											<img src="/static/web/images/upload1.png">
											<input type="file" name="upfile" id="file0" onchange="previewImage(this,0)" accept="image/gif, image/jpeg, image/png">
										</div>
									</div>
									<p>注：仅支持JPG,PNG,JPEG格式，图片大小不超过3Mb，最多上传一张图片。</p>
								</div>
								<div class="formItem">
									<label class="fl">问题描述：</label>
									<div class="text_area fl">
										<textarea class="commentsFill" id="news_title" name="news_title" maxlength="200" placeholder="请输入您的问题描述..." onkeyup="title_len();" onclick="title_len();"></textarea>
										<span id="titlelen">0/200</span>
									</div>
								</div>
								<div class="formItem emails">
									<label class="fl">联系方式：</label>
									<input type="tel" class="form-control" name='phone' placeholder="请输入常用手机号"/>
								</div>
								<input class="submitBtn" onclick="confirm()" type="button" value="提交"/>
							</form>
						</div>
					</div>
				</div>
			</div>
		
		{/block}
		{block name="js"}
		<!-- 脚本引入 -->
		<script src="_JS_/jquery-1.8.3.min.js"></script>
		<script src="_JS_/jquery.base64.js"></script>
		<script src="_JS_/jquery.cookie.js"></script>
		<script src="_JS_/common.js"></script>
		<script src="_P_/layer/layer.js"></script>
		<script>
		 //文件上传
    function previewImage(obj, num) {
        var filepath = $(obj).val();
        fileObj = document.getElementById('file' + num);
        value = window.URL.createObjectURL(fileObj.files[0]);
        file_size = obj.files[0].size;
        size = file_size / 1024;
        //console.log(filepath);
		var ldot = filepath.lastIndexOf(".");
		var types = filepath.substring(ldot + 1);
        if (size > 1024 * 3) {
            $('#file' + num).val("");
            layer.alert('上传图片不得大于3MB', {
                closeBtn: 0
            });
			return false;
        } else {
			if(types == 'jpg' || types == 'jpeg' || types == 'png'){
				$(obj).parents(".upload-img").prepend('<div class="img-info"><img src="'+value+'"/><div class="file-panel"><div class="del_cancel"><a class="btn table-btn" style="display:block;width:10px;height:10px;margin-left:85px;text-align:center;" title="删除" href="javascript:;"></a></div></div></div>');
			}else{
				layer.alert('文件格式不正确',{
					closeBtn: 0
				});
				return false;
			}
            //$(obj).parents(".upload-img").prepend('<div class="img-info"><img src="' + value + '"/><div class="file-panel"><div class="del_cancel"><a class="btn table-btn" style="display:block;width:10px;height:10px;margin-left:85px;text-align:center;" title="删除" href="javascript:;"></a></div></div></div>');
            $(obj).parent(".upload-btn").hide();
            $(obj).parents(".upload-img").children('p').hide();

            $('.img-info').hover(function () {
                $(this).find(".file-panel").show();
            }, function () {
                $(this).find(".file-panel").hide();

            });
            $(".del_cancel a").on("click", function () {
                $('#file' + num).val("");
                $(this).parents('.upload-img').find(".upload-btn").show();
                $(this).parents('.upload-img').find(".upload-img p").show();
                $(this).parents(".img-info").remove();

            });
        }
    }

		
		$(function () {
           $.ajax({
				type: "get",
				url: "{:url('api/shop/get_category_problem')}",
				dataType: 'jsonp',
				success: function (msg) {
					console.log(msg);
					if (msg.code == 200) {
						if(msg.data.length != 0){
							$('.questionType').html('');
							var html = '';
							for(var i=0;i<msg.data.length;i++){
								if(i == 0){
									html += '<label class="questionTypeItem" for="king'+msg.data[i].id+'"><input type="radio" all="'+msg.data[i].id+'" id="king'+msg.data[i].id+'" checked="checked" name="type"/><span class="extras" style="color:#333;">'+msg.data[i].name+'</span></label>';
								}else{
									html += '<label class="questionTypeItem" for="king'+msg.data[i].id+'"><input type="radio" all="'+msg.data[i].id+'" id="king'+msg.data[i].id+'" name="type"/><span class="extras" style="color:#333;">'+msg.data[i].name+'</span></label>';
								}
							}
							$('.questionType').html(html);
						}
					} else {
						layer.msg(msg.message, {icon: 5, time: 5000});
					}
				}
			})
		})
		
		function confirm(){
			var userinfo = $.cookie('userinfo');
			if (userinfo != null) {
				var user_login = $.base64.decode(userinfo).split(",");
				var category_id = $('input[type="radio"]:checked').attr('all');
				var formData = new FormData($('form')[0]);
				formData.append('category_id', category_id);
				formData.append('username', user_login[0]);
				 $.ajax({
					type: "post",
					url: "/index.php/api/complain/feedback",
					data:formData,
					dataType: 'json',
					beforeSend: function () {
					var index = layer.load(1, {
						shade: [0.1, '#333333'] //0.1透明度的白色背景
					});
					},
					success: function (msg) {
						layer.closeAll();
						if (msg.code == 200) {
							layer.msg(msg.message, {icon: 1, time: 2000},function(){
								location.reload();
							});
						} else {
							layer.msg(msg.message, {icon: 5, time: 5000});
						}
					},
					contentType: false, //必须false才会自动加上正确的Content-Type
					processData: false //必须false才会避开jQuery对 formdata 的默认处理
				})
			} else {
				window.location.href = "{:url('index/login/index')}";
			}
		}

		</script>
{/block}